@tailwind base;
@tailwind components;
@tailwind utilities;

* {
  @apply font-montserrat font-medium focus:outline-none focus:ring focus:ring-red-500;
}

@layer components {
  .btn-icon {
    @apply flex h-7 w-7 items-center justify-center rounded-md text-xl text-white transition-all hover:scale-125 active:scale-100 disabled:opacity-25;
  }

  .btn {
    @apply rounded-xl bg-black p-5 py-1 text-white transition-all hover:scale-105 active:scale-100;
  }

  .input {
    @apply rounded-xl border p-5 py-1;
  }

  .overflow-overlay {
    overflow-y: scroll;
    overflow-y: overlay;
  }
}

.drag {
  cursor: grab;
}

body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
  overscroll-behavior: contain;
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="transform: rotate(-90deg); stroke: white; stroke-width: 1px;" version="1.1" width="16" height="16"><path d="M14.082 2.182a.5.5 0 0 1 .103.557L8.528 15.467a.5.5 0 0 1-.917-.007L5.57 10.694.803 8.652a.5.5 0 0 1-.006-.916l12.728-5.657a.5.5 0 0 1 .556.103z"></path></svg>'),
    auto;
}
html {
  height: -webkit-fill-available;
}

#__next,
#portal {
  z-index: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  overflow-y: overlay;
}

#portal {
  z-index: 1;
}

input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 1.2rem;
  width: 1.2rem;
  border-radius: 50%;
  background: #000;
  cursor: pointer;
}

/* All the same stuff for Firefox */
input[type='range']::-moz-range-thumb {
  height: 1.2rem;
  width: 1.2rem;
  border-radius: 50%;
  background: #000;
  cursor: pointer;
}

/* All the same stuff for IE */
input[type='range']::-ms-thumb {
  height: 1.2rem;
  width: 1.2rem;
  border-radius: 50%;
  background: #000;
  cursor: pointer;
}

*::-webkit-scrollbar-track {
  -webkit-box-shadow: none !important;
  background-color: transparent !important;
}

*::-webkit-scrollbar {
  width: 6px !important;
  position: absolute;
  background-color: transparent;
}

*::-webkit-scrollbar-thumb {
  @apply bg-black/75;
}
